   <template>
     <div class="login-container">
       <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="100px" class="login-form">
         <el-form-item label="用户名" prop="username">
           <el-input v-model="loginForm.username"></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input type="password" v-model="loginForm.password" show-password></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
           <el-button type="primary" @click="show()">显示数据</el-button>
           <el-button type="primary" @click="test()">Test</el-button>
         </el-form-item>
       </el-form>
      <div>
        <ul>
          <li>显示数据</li>
          <li v-for="(item,index) in showData" :key=index>{{ item.userName }}</li>
        </ul>
      </div>
     </div>
   </template>

   <script>
   import { ref,reactive } from 'vue'
   import { useRouter } from 'vue-router'
   import { ElMessage } from 'element-plus'
   import axios from 'axios'

   import {getUsers} from '@/http/url.ts'

   export default {
     setup() {
      const showData = ref([]);
       const router = useRouter()
       const loginFormRef = ref(null)
       const loginForm = ref({
         username: '',
         password: ''
       })

       const rules = {
         username: [
           { required: true, message: '请输入用户名', trigger: 'blur' }
         ],
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' }
         ]
       }

       const submitForm = (formEl) => {
         if (!formEl) return
         formEl.validate((valid) => {
           if (valid) {
             // 调用API进行登录验证
             axios.post('/api/login', loginForm.value)
               .then(response => {
                 if (response.data.success) {
                   router.push({ name: 'Home' })
                 } else {
                   ElMessage.error('用户名或密码错误')
                 }
               })
               .catch(error => {
                 console.log(error)
                 ElMessage.error('登录失败，请重试')
               })
           } else {
             console.log('验证失败')
             return false
           }
         })
       }

       const show = async () => {
       
       let a =  await getUsers();
       console.log(a.data.data)
       showData.value = a.data.data;
       
      //   getUsers().then(response => {
      //     console.log(response.data)
      //     if(response.data.code==200){
      //       showData.value = response.data.data;
      //     }
          
      //   }).catch(error => {
      //     console.log(error)
      //   })
        
       }
  
       const test = async()=>{
        axios.post('http://localhost:5224/api/Values/Post', swaggerArray.value)
               .then(response => {
                debugger;
                 if (response.data.success) {
                   router.push({ name: 'Home' })
                 } else {
                   ElMessage.error('用户名或密码错误')
                 }
               })
               .catch(error => {
                 console.log(error)
                 ElMessage.error('登录失败，请重试')
               })
       }

    const swaggerArray = ref([
    {
      orderNo: "PO2024051301",
      orderLine: 1,
      stNo: "ST001",
      stLine: 1,
      itemCode: "ITEM001",
      vendorBatchNo: "VBATCH001",
      qty: 100,
      viceUnit: "KG",
      parentBatchNo: "PBATCH001"
    }
  ]);

       
       return {
         loginFormRef,
         loginForm,
         rules,
         submitForm,
         show,
         showData,
         test
         
        
       }
     }
   }
   </script>

   <style scoped>
   .login-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh; /* 确保容器占满全屏高度 */
   }
   .login-form {
     width: 300px; /* 根据需要调整宽度 */
     padding: 20px;
     background-color: #fff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   </style>
   